<template>
<div class="index">
  <div class="">
    <form-list>
      <text-field :label="title" :placeholder="msg" :enter="enter" :value.sync="roomId" :keyup="onkeyup" icon="account_box">
       <radio v-for="item in radio.platforms" name="platform" :model.sync="radio.value" :value="item.value" :label="item.txt" slot="label"></radio>
      </text-field>
      <button fill raised color="red" text="添加" v-show="showButton" :click="enter"></button>
    </form-list>
    <room-watch></room-watch>
  </div>
  <div class="btn-add">
    <icon-button icon="add" fill :click="showPrompt"></icon-button>
  </div>
  <prompt :title="title" :placeholder="msg" :show.sync="addShow" :on-sure="onAddSure">
    <radio v-for="item in radio.platforms" name="platform1" :model.sync="radio.value" :value="item.value" :label="item.txt" slot="label"></radio>
  </prompt>
  <confirm title="删除提示" msg="确定不想监控该直播间吗？" :show-icon="false" :show="showConfirm" :on-sure="remove" :on-cancel="cance"></confirm>
  <msg></msg>
  <rank></rank>
  <indicator :show="indicator.show" :type="indicator.type" :text="indicator.text"  :overlay-opacity="indicator.opactiy"></indicator>
  <toast v-for="toast in toasts" :text="toast.text" :loading="toast.loading" :icon="toast.icon" :center="toast.center"></toast>
</div>
</template>
<script>
import roomWatch from '../app-components/roomWatch'
import web from '../app-components/web'
import msg from '../app-components/msg'
import rank from '../app-components/rank'
import top from '../app-components/top'
import { isShowDelConfirm, getIndicator, getToasts } from '../../vuex/getters'
import { removeRoom, cancelDelConfrim, addRoom } from '../../vuex/actions'
export default {
  vuex: {
    getters: {
      showConfirm: isShowDelConfirm,
      indicator: getIndicator,
      toasts: getToasts
    },
    actions: {
      remove: removeRoom,
      cance: cancelDelConfrim,
      addRoom
    }
  },
  data () {
    return {
      title: '添加直播间',
      addShow: false,
      showWeb: true,
      showButton: false,
      roomId: '',
      radio: {
        value: 'dy',
        platforms: [{
          txt: '斗鱼TV',
          value: 'dy'
        }, {
          txt: '熊猫TV',
          value: 'panda'
        }]
      }
    }
  },
  computed: {
    msg: function () {
      return this.radio.value === 'dy' ? '请输入斗鱼直播间ID或别名' : '请输入熊猫直播间ID'
    }
  },
  methods: {
    showPrompt () {
      this.addShow = true
    },
    onAddSure (input) {
      this.addRoom(this.radio.value, input)
    },
    onkeyup (value) {
      this.showButton = value !== ''
    },
    enter (value) {
      this.addRoom(this.radio.value, this.roomId)
      this.roomId = ''
      this.showButton = false
    }
  },
  components: {
    web,
    roomWatch,
    msg,
    rank,
    top
  }
}
</script>
<style lang="less">
  .title{
    color: #000;
    padding-left:20px;
    line-height: 40px;
    display: inline-block;
    border-left: solid 1px #edeff2;
  }
  .btn-add{
    position: fixed;
    left: 160px;
    bottom: 16px;
    z-index: 100;
    .icon-button{
      width: 56px;
      height: 56px;
      box-shadow: 0 6px 10px 0 rgba(0,0,0,0.3);
    }
  }
  .index {
    margin-top: 16px;
    .form-list:before{
      background-color: transparent;
    }
    .form-list{
      box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
      border-radius: 3px;
    }
  }
  .index .text-field::after{
    background-color: transparent;
  }
  // .index .content-block{
  //   max-width: 650px;
  // }
  .index .form-list .button{
    position: absolute;
    top: 25px;
    right: 16px;
  }
</style>
